<script setup lang="tsx">

import {$t} from "@/locales";
import FlatTable from '@/custom/components/flat-table.vue'
import {fetchBucketList} from "@/service/api";
import {reactive, ref} from "vue";
import {useRouterPush} from "@/hooks/common/router";

const { routerPushByKey } = useRouterPush()

const ft = ref(null)

const title = $t('page.bucket.list.title')

const config = {
  apiFn: fetchBucketList,
  showTotal: true,
  apiParams: reactive({
    page: 1,
    size: 5,
  }),
  columns: () => [
    {
      key: 'bucketCode',
      title: $t('page.bucket.list.meta.bucketCode'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'bucketName',
      title: $t('page.bucket.list.meta.bucketName'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      },
    }
  ]
}

const rowClick = (row: any) => {
  console.log("row -->:" + row.bucketCode)
  routerPushByKey("doc", {query: {bucket: row.bucketCode}})
}

</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <FlatTable ref="ft" :title="title" :config="config" @rowClick="rowClick"></FlatTable>
  </div>
</template>

<style scoped>

</style>
